<template>
  <div class="category-tree">
    <div
      v-for="category in categories"
      :key="category.id"
      class="category-node"
    >
      <div
        class="category-header"
        @click="toggleCategory(category.id)"
      >
        <span class="category-name">{{ category.name }}</span>
        <span
          v-if="hasChildren(category)"
          class="expand-icon"
        >
          {{ isExpanded(category.id) ? '▼' : '▶' }}
        </span>
      </div>
      <div
        v-if="hasChildren(category)"
        class="subcategories"
        :class="{ expanded: isExpanded(category.id) }"
      >
        <div
          v-for="subcat in category.children"
          :key="subcat.id"
          class="subcategory-item"
          :class="{ active: selectedCategoryId === subcat.id }"
          @click.stop="handleSelectCategory(subcat.id, subcat)"
        >
          {{ subcat.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  categories: {
    type: Array,
    required: true,
    default: () => [],
  },
  selectedCategoryId: {
    type: [Number, String, null],
    default: null,
  },
  defaultExpandedIds: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['select-category', 'toggle-category'])

// 展开的分类ID集合
const expandedCategories = ref([...props.defaultExpandedIds])

// 检查是否有子分类
const hasChildren = category => {
  return category.children && category.children.length > 0
}

// 检查分类是否展开
const isExpanded = categoryId => {
  return expandedCategories.value.includes(categoryId)
}

// 切换分类展开状态
const toggleCategory = categoryId => {
  if (isExpanded(categoryId)) {
    expandedCategories.value = expandedCategories.value.filter(id => id !== categoryId)
  } else {
    expandedCategories.value.push(categoryId)
  }
  emit('toggle-category', categoryId, !isExpanded(categoryId))
}

// 选择分类
const handleSelectCategory = (categoryId, categoryInfo) => {
  emit('select-category', categoryId, categoryInfo)
}
</script>

<style scoped lang="less">
@import (reference) '../../styles/global.less';

.category-tree {
  padding: 10px 0;

  .category-node {
    border-bottom: 1px solid #f0f0f0;

    .category-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.3s ease;

      &:hover {
        background: @background-color;
      }

      .category-name {
        // 分类名称样式
      }

      .expand-icon {
        font-size: 12px;
        color: @text-color-tertiary;
        transition: transform 0.3s ease;
      }
    }

    .subcategories {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;

      &.expanded {
        max-height: 1000px;
      }

      .subcategory-item {
        padding: 12px 20px 12px 40px;
        cursor: pointer;
        font-size: @font-size-sm;
        color: @text-color-secondary;
        transition: all 0.3s ease;

        &:hover {
          background: @background-color;
          color: @success-color;
        }

        &.active {
          background: #f0f9f0;
          color: @success-color;
          border-left: 3px solid @success-color;
        }
      }
    }
  }
}
</style>
